<template>
  <div>
    <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
        item-layout="horizontal"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-comment
              :author="item.author"
              :avatar="item.avatar"
              :content="item.content"
              :datetime="item.datetime"
          />
        </a-list-item>
      </template>
    </a-list>
    <a-comment>
      <template #avatar v-if="userInfo !== null">
        <a-avatar size="large" class="avatar">{{ userInfo.name.charAt(0) }}</a-avatar>
      </template>
      <template #content>
        <a-form class="user-form" layout="inline" v-if="userInfo === null">
          <a-form-item label="用户名">
            <a-input :disabled="form.anonymous" v-model:value="form.username"></a-input>
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input :disabled="form.anonymous" v-model:value="form.email"></a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox @change="anonymousChange">匿名评论</a-checkbox>
          </a-form-item>
        </a-form>
        <a-form-item class="comment-form">
          <a-textarea v-model:value="form.comment" :rows="4" placeholder="请输入您的评论"/>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" @click="push" type="primary">
            发布评论
          </a-button>
        </a-form-item>
      </template>
    </a-comment>
    <AnonymousCommentRule :visible="modalControl.anonymousRule"
                          @confirm="confirmPush"
                          @close="modalControl.anonymousRule=false" />
    <UserFirstRegisterModal :visible="modalControl.userFirstRegister"
                            :email="form.email"
                            :username="form.username"
                            @confirm="confirmPush"
                            @close="modalControl.userFirstRegister = false" />
    <UserLoginModal :visible="modalControl.userLoginModal"
                    :email="form.email"
                    @confirm="confirmPush"
                    @close="modalControl.userLoginModal = false" />
  </div>
</template>

<script setup>
import {ref} from "vue";
import AnonymousCommentRule from "./modals/AnonymousCommentRule.vue";
import UserFirstRegisterModal from "./modals/UserFirstRegisterModal.vue";
import UserLoginModal from "./modals/UserLoginModal.vue";
import {apiGet, apiPost} from "../../../../fentch";
import {message} from "ant-design-vue";

const modalControl = ref({
  anonymousRule: false,
  userFirstRegister: false,
  userLoginModal: false
})

const comments = ref([]);

const submitting = ref(false)

const userInfo = JSON.parse(window.localStorage.getItem('user'));

const form = ref({
  username: '',
  email: '',
  anonymous: false,
  comment: ''
})

const anonymousChange = e => {
  form.value.anonymous = e.target.checked
}

// 发布按钮点击
const push = () => {
  if (form.value.comment === '') {
    message.warn('请完成您的评论')
    return;
  }
  // 检查用户是否登录
  if (userInfo) {
    confirmPush()
    return;
  }
  // 匿名评论的处理
  if (form.value.anonymous) {
    modalControl.value.anonymousRule = true
    return
  }
  // 非匿名表单检查
  if (form.value.username === '' || form.value.email === '') {
    message.warn('请填写您的用户信息')
    return;
  }
  // 检查用户是否存在
  apiGet(`/users/exist/${form.value.email}`).then(res => {
    if (res.data.data.exist) {
      modalControl.value.userLoginModal = true
    } else {
      modalControl.value.userFirstRegister = true
    }
  })
}

const emit = defineEmits(['push'])

const confirmPush = () => {
  emit('push', form.value)
  form.value.anonymous = false
  form.value.comment = ''
  form.value.username = ''
  form.value.email = ''
}

</script>

<style scoped>
.avatar {
  background-color: #1890ff;
}

.user-form {
  margin-bottom: 20px;
}
</style>